<template>
  <page-layout>
    <a-card>
      <a-button type="primary" @click="editCourse">
        修改
      </a-button>
    </a-card>

    <readonly-form :fields="form.fields" :data="form.data"/>

    <a-card title="课程封面" size="small">
      <div class="box-ver-center">
        <div v-for="item in form.data.files"
             :key="item.fileId"
             :style="{ backgroundImage: 'url(' + item.url + ')' }"
             class="thumb-item mb-8 mr-10"
        >
          <img :src="item.url" alt="img">
        </div>
      </div>
      <div>
        <p>该图片主要显示于小程序</p>
        <p>支持jpg,png格式</p>
        <p>图片尺寸建议498✖️300,大小不超过500kb</p>
      </div>
      <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
        <img alt="缩略图" style="width: 100%" :src="previewImage"/>
      </a-modal>
    </a-card>
  </page-layout>
</template>

<script>
import { selectById } from '@/api/module/courseBaseInfo'
import { useI18n } from 'vue-i18n'
import { reactive, onActivated, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getBase64 } from '@/tools/common'
import { message } from 'ant-design-vue'
import { btnIsPowerByCode } from '@/tools/common'
import { getDictByCodesReturnObj } from "@/tools/get-dict";
import dictEnum from "@/const/dict";
import { isEmpty } from "@/tools/common";
import moment from 'moment'

export default {
  name: "course-base-info-detail",
  setup() {
    const { t } = useI18n()
    const route = useRoute()
    const router = useRouter()

    const previewImage = ref('')
    const previewVisible = ref(false)

    const form = reactive({
      fields: [
        {
          title: '基础信息',
          fields: [
            { span: 6, title: '课程编码', field: 'code' },
            { span: 6, title: '学校名称', field: 'schName' },
            { span: 6, title: '学科类别', field: 'disciplineName' },
            { span: 6, title: '课程代码', field: 'courseCode' },
            { span: 6, title: '课程名称', field: 'courseName' },
            { span: 6, title: '学分', field: 'credit' },
            { span: 6, title: '课程类型', field: 'typeId' },
            { span: 6, title: '课程以往代码', field: 'coursePastCode' },
            { span: 12, title: '课程描述', field: 'describes' },
          ],
        },
        {
          title: '前置课程',
          fields: 'preCurriculumRelationshipList',
          type: 'array',
          childFields: [
            { span: 6, title: '课程名称', field: 'courseName' },
            { span: 6, title: '前置课程关系', field: 'relationship' },
          ]
        },
        {
          title: 'SOR',
          fields: 'cbiSorList',
          type: 'array',
          childFields: [
            { span: 6, title: '学校名称', field: 'schName' },
            { span: 6, title: '课程代码', field: 'courseCode' },
            { span: 6, title: '课程名称', field: 'courseName' },
            { span: 6, title: '审核通过时间', field: 'sorAuditTime' }
          ]
        },
      ],
      data: {},
      dict: {},
    })

    const handlePreview = async (file) => {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj)
      }

      previewImage.value = file.url || file.preview
      previewVisible.value = true
    }

    const handleCancel = () => previewVisible.value = false

    const editCourse = () => {
      router.push({
        path: '/university/course-base-info/edit',
        query: route.query
      })
    }
    const getDataByDict = (data, dictKey) => {
      if (isEmpty(data)) return "-";
      const item = form.dict[dictKey].find(v => v.value == data);
      if (isEmpty(item)) return "-";
      return item.label;
    };
    onActivated(async () => {
      form.dict = await getDictByCodesReturnObj([
        dictEnum.COURSE_TYPE,
        dictEnum.COURSE_RELATION,
      ]);
      let response = await selectById({ id: route.query.id })

      if (response.code === 500) {
        return message.error('获取详情失败')
      }
      response.data.firstCourseStarttime = response.data.firstCourseStarttime
                                          ? moment(response.data.firstCourseStarttime).format('YYYY-MM-DD')
                                          : '-'
      response.data.courseLastReviewtime = response.data.courseLastReviewtime
                                          ? moment(response.data.courseLastReviewtime).format('YYYY-MM-DD')
                                          : '-'
      response.data.courseLastOpentime = response.data.courseLastOpentime
                                          ? moment(response.data.courseLastOpentime).format('YYYY-MM-DD')
                                          : '-'
      response.data.typeId = getDataByDict(
        response.data.typeId,
        dictEnum.COURSE_TYPE
      );
      response.data.cbiSorList && response.data.cbiSorList.map(item => {
        item.sorAuditTime = item.sorAuditTime
                                            ? moment(item.sorAuditTime).format('YYYY-MM-DD')
                                            : '-'
                                            return item

      })
      response.data.preCurriculumRelationshipList && response.data.preCurriculumRelationshipList.map(item => {
        item.relationship = item.relationship
                                            ? getDataByDict(item.relationship, dictEnum.COURSE_RELATION)
                                            : ''
                                            return item
      })
      form.data = response.data || {}
    })

    return {
      previewVisible,
      previewImage,
      form,
      t,
      editCourse,
      handleCancel,
      handlePreview,
      btnIsPowerByCode
    }
  }
}
</script>

<style lang="less" scoped>
.thumb-item {
  border: 1px solid #F5F5F5;
  border-radius: 3px;
  img {
    width: 102px;
    height: 102px;
    object-fit: contain;
  }
}
</style>
